<!-- 综合统计 -->
<template>
  <div class="mod-config">
    <el-divider content-position="left">查询条件</el-divider>
    <el-form inline label-width="80px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="统计类型">
            <el-select v-model="type" placeholder="请选择" filterable default-first-option clearable @change="typeChangeHandle">
              <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="区域">
            <el-form-item label-width="0">
              <el-select v-model="dataForm.provinceCode" filterable default-first-option clearable @change="getCityOptions">
                <el-option v-for="item in provinceOptions" :value="item.id" :label="item.regionName" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="0">
              <el-select v-model="dataForm.cityCode" filterable default-first-option clearable @change="getAreaOptions">
                <el-option v-for="item in cityOptions" :value="item.id" :label="item.regionName" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="0">
              <el-select v-model="dataForm.areaCode" filterable default-first-option clearable>
                <el-option v-for="item in areaOptions" :value="item.id" :label="item.regionName" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-form-item>

        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="学校类型">
            <el-select v-model="dataForm.schoolType" placeholder="请选择"clearable @change="schoolTypeChangeHandle">
              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="学校班级">
            <el-form-item label-width="0">
              <el-select filterable default-first-option clearable v-model="dataForm.schoolId" @change="getGradeOption">
                <el-option v-for="item in schoolOptions" :value="item.id" :label="item.schoolName" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="0">
              <el-select filterable default-first-option clearable v-model="dataForm.gradeId" @change="getClassOption">
                <el-option v-for="item in gradeOptions" :value="item.id" :label="item.gradeName" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="0">
              <el-select filterable default-first-option clearable v-model="dataForm.classId">
                <el-option v-for="item in classOptions" :value="item.id" :label="item.className" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="检查日期">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.checkDateStart" value-format="yyyy-MM-dd"
                style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center;">至</el-col>
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.checkDateEnd" value-format="yyyy-MM-dd"
                style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分类">
            <el-form-item label-width="0">
              <el-select v-model="sort1" :disabled="disSort1" placeholder="请选择" filterable default-first-option clearable>
                <el-option v-for="item in sort1List" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="0">
              <el-select v-model="sort2" :disabled="disSort2" placeholder="请选择" filterable default-first-option clearable>
                <el-option v-for="item in sort2List" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>

      </el-row>
      <el-row style="margin-top: 10px;">
        <el-form-item label-width="5px">
          <el-link :href="printUrl" target="_blank" type="primary" :disabled="isDisabled">
            <el-button size="mini" type="primary" @click="getAllocationInfoList">查 询</el-button>
          </el-link>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  let params = "";
  import { filterParams, getDateFormat } from "@/util/tools"
  import { mapGetters } from "Vuex"
  import { getUserInfo } from "@/api/admin/user"

  import { remote } from '@/api/admin/dict'
  import { getListByParentId } from '@/api/admin/region'
  import { getSchoolList, getClassOptions, getSchoolListBySchoolType } from '@/api/pvm/school'
  import { getGradeBySchoolId } from '@/api/pvm/grade'

  export default {
    data() {
      return {
        typeList: [
          {value: '1', label: '视力分布情况'},
          {value: '2', label: '眼轴发育情况'},
          {value: '3', label: '错姿率'},
          {value: '4', label: '戴镜率'},
          {value: '5', label: '视力不良率'},
          {value: '6', label: '近视率'},
          {value: '7', label: '眼轴偏长率'},
          {value: '8', label: 'BMI'},
          {value: '9', label: '三级预警'},
          {value: '10', label: '干预明细'},
          {value: '11', label: '未干预原因分析'},
          {value: '12', label: '客户频次分析'},
          {value: '13', label: '客户来源分析'},
          {value: '14', label: '干预效果分析'},
        ],
        sort1List: [],
        sort2List: [],
        provinceOptions: [],
        cityOptions: [],
        areaOptions: [],
        typeOptions: [],
        schoolOptions: [],
        gradeOptions: [],
        classOptions: [],


        addOrUpdateVisible: false,
        printUrl: "",
        isDisabled: true,
        type: '',
        sort1: '',
        sort2: '',
        disSort1: false,
        disSort2: false,
        dataForm: {
          provinceCode: '',
          cityCode: '',
          areaCode: '',
          schoolId: '',
          gradeId: '',
          classId: '',
          checkDateStart: '',
          checkDateEnd: '',
        }
      }
    },
    computed: {
      ...mapGetters(["userInfo", "bizData"])
    },
    components: {
    },
    created() {
      this.getProvinceOptions()
      this.getSchoolTypeList()
      this.getSchoolOptions()
    },
    methods: {
      getAllocationInfoList() {
        if(!this.dataForm.checkDateStart){
          this.$message.warning("请输入查询日期范围");
          return
        }
        if(!this.dataForm.checkDateEnd){
          this.$message.warning("请输入查询日期范围");
          return
        }
        this.isDisabled = false
        if(this.type == '6'){
          if(this.sort2 == '4'){
            params = "/comprehensive_statistics_myopia_rate_area.cpt"
          }else if(this.sort2 == '3'){
            params = "/comprehensive_statistics_myopia_rate_grade.cpt"
          }
        }else if(this.type == '10'){
          if(this.sort1 == '2' && this.sort2 == '5'){
            params = "/comprehensive_statistics_intervention_detail_money_school.cpt"
          }
        }
        let data = filterParams(this.dataForm);
        let parameter = "";
        for (let key in data) {
          parameter += "&" + key + "=" + this.dataForm[key];
        }
        this.printUrl = this.bizData.printUrl + params + parameter;
      },
      typeChangeHandle(value){
        this.sort1 = ''
        this.sort2 = ''
        let list1 = [
          {value: '1', label: '人数'},
          {value: '2', label: '金额'}
        ]
        let list2 = [
          {value: '1', label: '性别'},
          {value: '2', label: '部门'},
          {value: '3', label: '年级'},
          {value: '4', label: '区域'},
          {value: '5', label: '学校'}
        ]
        let list3 = [
          {value: '3', label: '年级'},
          {value: '4', label: '区域'}
        ]
        if(value == '5' || value == '6'){
          this.disSort1 = true
          this.sort1List = list1
          this.sort2List = list3
        }else if(value == '7' || value == '14'){
          // 禁用
          this.disSort1 = true
          this.disSort2 = true
          this.sort1List = list1
          this.sort2List = list2
        }else if(value == '11' || value == '12' || value == '13'){
          // 前-禁用
          this.disSort1 = true
          this.sort1List = list1
          this.sort2List = list2
        }else{
          this.disSort1 = false
          this.disSort2 = false
          this.sort1List = list1
          this.sort2List = list2
        }
      },
      // 获取省级地址列表
      getProvinceOptions(){
        var parentId = '86';
        getListByParentId(parentId).then(response => {
          if(response.data.code == '0'){
            this.provinceOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        }).catch(() => {
          alert("省级地址出错了，请联系管理员")
        });
      },
      // 获取市级地址列表
      getCityOptions(val){
        this.cityOptions = []
        this.areaOptions = []
        this.$set(this.dataForm,'cityCode','')
        this.$set(this.dataForm,'areaCode','')
        if(val){
          getListByParentId(val).then(response => {
            if(response.data.code == '0'){
              this.cityOptions = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          }).catch(() => {
            alert("市级地址出错了，请联系管理员")
          });
        }
      },
      // 获取区/县级地址列表
      getAreaOptions(val){
        this.areaOptions = []
        this.$set(this.dataForm,'areaCode','')
        if(val){
          getListByParentId(val).then(response => {
            if(response.data.code == '0'){
              this.areaOptions = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          }).catch(() => {
            alert("市级地址出错了，请联系管理员")
          });
        }
      },
      // 获取学校类型列表
      getSchoolTypeList(){
        remote('school_type').then(response => {
          let responseData = response.data.data
          let list = []
          responseData.forEach(item => {
            list.push({label: item.label, value: item.value*1})
          })
          this.typeOptions = list
        })
      },
      // 学校类型改变事件
      schoolTypeChangeHandle(val){
        this.schoolOptions = []
        this.gradeOptions = []
        this.classOptions = []
        this.$set(this.dataForm,'schoolId','')
        this.$set(this.dataForm,'gradeId','')
        this.$set(this.dataForm,'classId','')
        this.getSchoolOptions()
      },
      // 获取学校列表
      getSchoolOptions(data){
        let schoolType = ''
        if(this.dataForm.schoolType === 0){
          schoolType = 0
        }else{
          schoolType = this.dataForm.schoolType || ''
        }
        getSchoolListBySchoolType(schoolType).then(response => {
          if(response.data.code == '0'){
            this.schoolOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 获取年级列表
      getGradeOption(schoolId){
        this.gradeOptions = []
        this.classOptions = []
        this.$set(this.dataForm,'gradeId','')
        this.$set(this.dataForm,'classId','')
        getGradeBySchoolId(schoolId).then(response => {
          if(response.data.code == '0'){
            this.gradeOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 获取班级列表
      getClassOption(gradeId){
        this.classOptions = []
        this.$set(this.dataForm,'classId','')
        getClassOptions(this.dataForm.schoolId,gradeId).then(response => {
          if(response.data.code == '0'){
            this.classOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .row-bg {
    background-color: #cadee8;
    // padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    margin-bottom: 2px;
  }
</style>
